<template>
    <div class="vouchers">
        <x-header title="券集市" :left-options="{backText: ''}">
            <a slot="right" @click="goMyTickets">
                <img style="width:.44rem;height:.44rem;" src="../../assets/images/voucherMarket/user.png" alt="">
            </a>
        </x-header>
        <div class="content">
            <div class="header">
                <h6>来券集市淘好券</h6>
                <p @click="goTransfer">
                    <span>转让历史</span>
                    <img src="../../assets/images/voucherMarket/right.jpg" alt="">
                </p>
            </div>
            <div class="ticket_lists">
                <div class="ticket_title">
                    <img src="../../assets/images/voucherMarket/title_bar.png" alt="">
                </div>
                <div class="ticket_list" v-for="(item,index) in 5">
                    <h6><p></p>有116668个土豪在转让</h6>
                    <div class="ticket_infos" @click="exchange">
                        <div class="ticket_left">
                            <img src="../../assets/images/voucherMarket/coupon_icon.png" alt="">
                            <div>
                                <h6>全品类(特例商品除外)</h6>
                                <p v-if="index===1" style="color:#989898;"><span>20</span>满500可用</p>
                                <p v-else><span>20</span>满500可用</p>
                            </div>
                        </div>
                        <div class="ticket_right" v-if="index===1">
                            <p style="color:#989898;">消耗魔币</p>
                            <p style="color:#989898;">
                                <span>-</span>
                                <img src="../../assets/images/voucherMarket/coin-26px-grey.png" alt="">
                                <span>0.8</span>
                                <span>-</span>
                            </p>
                            <button style="background:#878787">立即兑换</button>
                        </div>
                        <div class="ticket_right" v-else>
                            <p>消耗魔币</p>
                            <p>
                                <span>-</span>
                                <img src="../../assets/images/voucherMarket/coin-26px.png" alt="">
                                <span>0.8</span>
                                <span>-</span>
                            </p>
                            <button>立即兑换</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <img src="../../assets/images/voucherMarket/foot1.jpg" alt="">
            <img src="../../assets/images/voucherMarket/foot2.jpg" alt="">
        </footer>
        <!-- 兑换 -->
        <popup v-model="show1" :hide-on-blur="false">
            <div class="exchange_infos">
                <div class="close" @click="show1=false">
                    <img src="../../assets/images/voucherMarket/close.jpg" alt="">
                </div>
                <div class="exchange_info">
                    <div class="exchange_info1">
                        <p><span>10</span>满200元可用</p>
                        <p>全品类(特例商品除外)</p>
                    </div>
                    <div class="exchange_info2">
                        <img src="../../assets/images/voucherMarket/coupon_icon.png" alt="">
                        <p>查看全部适用商品<span></span></p>
                    </div>
                </div>
                <div class="btn">
                    <button>花0.8魔币兑换</button>
                    <p>你的账号还有88888魔币</p>
                </div>
            </div>
        </popup>
    </div>
</template>

<script>
    import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
    import { XHeader, Tab, TabItem, Popup } from 'vux';
    export default {
        name: 'vouchers',
        data() {
            return {
                show1: false,
            }
        },
        components: {
            XHeader,
            Tab,
            TabItem,
            Popup
        },
        computed: {

        },
        created() {

        },
        methods: {
            //转让历史
            goTransfer(){
                this.$router.push('/transferHistory');
            },
            //兑换
            exchange(){
                this.show1 = true;
            },
            //我的优惠券
            goMyTickets(){
                this.$router.push('/myTickets');
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .vouchers {
        padding-bottom: 1.2rem;
        .content {
            background: #f0eff4;
            .header{
                width: 7.5rem;
                height: 2.71rem;
                background: url('../../assets/images/voucherMarket/top-image.jpg') no-repeat center;
                background-size: 7.5rem 2.71rem;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                h6{
                    font-size: .26rem;
                    color: #fff ;
                    font-weight: 700;
                }
                p{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.72rem;
                    height: .46rem;
                    border: 1px solid #fff;
                    border-radius: .3rem;
                    margin: .1rem 0 .28rem 0;
                    span{
                        font-size: .28rem;
                        color: #fff;
                    }
                    img{
                        width: .14rem;
                        height: .23rem;
                        margin-left: .1rem;
                    }
                }
            }
            .ticket_lists{
                .ticket_title{
                    display: flex;
                    img{
                        width: 7.5rem;
                        height: .826rem;
                    }
                }
                .ticket_list{
                    border-bottom: .12rem solid #fff;
                    >h6{
                        display: flex;
                        align-items: center;
                        font-size: .26rem;
                        color: #1d1d1f;
                        font-weight: 600;
                        padding: .13rem .2rem;
                        p{
                            width: .16rem;
                            height: .16rem;
                            background: #030303;
                            border-radius: .05rem;
                            transform: rotate(45deg);
                            margin-right: .07rem;
                        }
                    }
                    .ticket_infos{
                        width: 7rem;
                        height: 1.98rem;
                        margin: 0 auto .2rem auto;
                        padding: 0 .1rem 0 .3rem;
                        background: url('../../assets/images/voucherMarket/coupon_background.png');
                        background-size: 7rem 1.98rem;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .ticket_left{
                            display: flex;
                            align-items: center;
                            img{
                                width: 1.46rem;
                                height: 1.46rem;
                            }
                            >div{
                                height: 1.3rem;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                margin-left: .31rem;
                                h6{
                                    font-size: .26rem;
                                    color: #000;
                                    font-weight: 500;
                                }
                                p{
                                    display: flex;
                                    align-items: center;
                                    font-size: .26rem;
                                    color: #ef3231;
                                    span{
                                        font-size: .4rem;
                                    }
                                }
                            }
                        }
                        .ticket_right{
                            height: 1.3rem;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            p{
                                font-size: .24rem;
                                color: #f80600;
                            }
                            p:nth-of-type(2){
                                display: flex;
                                align-items: center;
                                margin: .1rem 0 .27rem 0;
                                span:nth-of-type(2){
                                    margin-right: .04rem;
                                }
                                span:nth-of-type(1),span:nth-of-type(3){
                                    font-size: .26rem;
                                }
                                img{
                                    width: .3rem;
                                    height: .3rem;
                                    margin: 0 .1rem 0 .04rem;
                                }
                            }
                            button{
                                border: none;
                                width: 1.3rem;
                                height: .42rem;
                                border-radius: .3rem;
                                background: #fd114f;
                                font-size: .24rem;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        footer{
            width: 7.5rem;
            height: 1rem;
            background: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            box-shadow: 0 -2px 0 0 #eee;
            -webkit-box-shadow: 0 -2px 0 0 #eee;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img{
                width: 1.04rem;
                height: .76rem;
            }
        }
        .exchange_infos{
            height: 7.34rem;
            background: #f0f0f0;
            .close{
                display: flex;
                justify-content: flex-end;
                padding: .2rem .18rem;
                img{
                    width: .33rem;
                    height: .34rem;
                }
            }
            .exchange_info{
                width: 7.5rem;
                height: 4.59rem;
                background: url('../../assets/images/voucherMarket/bg2.jpg') no-repeat center;
                background-size: 7.5rem 4.59rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: left;
                .exchange_info1{
                    p{
                        font-size: .28rem;
                        color: #fff;
                        margin: .21rem 0 0 .45rem;
                        span{
                            font-size: .58rem;
                            font-weight: 700;
                            margin-right: .08rem;
                        }
                    }
                }
                .exchange_info2{
                    align-self: center;
                    text-align: center;
                    >img{
                        width: 1.64rem;
                        height: 1.64rem;
                    }
                    >p{
                        display: flex;
                        align-items: center;
                        font-size: .25rem;
                        color: #5d5d5d;
                        margin: .12rem 0 .28rem 0;
                        span{
                            width: .16rem;
                            height: .16rem;
                            margin-left: .1rem;
                            border-top: 1px solid #6d6d6d;
                            border-right: 1px solid #6d6d6d;
                            transform: rotate(45deg);
                        }
                    }
                }
            }
            .btn{
                button{
                    width: 2.92rem;
                    height: .8rem;
                    line-height: .8rem;
                    background: #f25453;
                    border: none;
                    border-radius: .05rem;
                    font-size: .33rem;
                    color: #fff;
                    margin: .4rem 0 .12rem 0;
                }
                p{
                    font-size: .24rem;
                    color: #000;
                }
            }
        }
    }
</style>